<template>
  <div id="avatar" class="person-detail">
    <div class="person-title">
      <van-nav-bar :fixed="true" title="修改头像" left-arrow @click-left="back()">
        <template slot="right">
          <van-uploader :max-count="1" :after-read="onRead" :before-read="beforeRead">
            <van-button type="primary" size="small">修改</van-button>
          </van-uploader>
        </template>
      </van-nav-bar>
    </div>
    <div class="avatar-img">
      <img v-if="imageList[0]" :src="imageList[0].content" alt="" />
    </div>
  </div>
</template>
<script>
  import mine from "../../../controller/mine";
  export default {
    name: "avatar",
    components: {},
    data() {
      return {
        showActionSheet: false,
        imageList: [{
          url: "",
          content: this.$route.query.id ? this.$route.query.id : ''
        }],

      };
    },
    computed: {},
    created() {},
    mounted() {},
    watch: {
      onSuccess: function (imageData) {
        this.imgData = "data:image/jpeg;base64," + imageData;
      },
      onFail: function (message) {
        alert("Failed because: " + message);
      }
    },
    methods: {
      beforeRead(file) {
        const acceptImgs = ['image/jpeg', 'image/png', 'image/jpg']
        if (!acceptImgs.includes(file.type)) {
          this.$toast('请上传JPG或者PNG格式的图片!')
          return false
        }
        return true
      },
      onRead(file) {
        let isArray = Object.prototype.toString.call(file) === "[object Array]";
        if (isArray && file.length > 7) {
          this.$toast("最多上传7张图片");
          return;
        }
        if (isArray) {
          this.imageList = file;
        } else {
          this.imageList = [file];
        }
      },
      back() {
        if (this.imageList.length < 1) {
          this.$router.go(-1)
          return
        }
        if (this.imageList[0].content != this.avatar) {
          if (this.imageList[0].url == '') {
            this.$router.go(-1);
            return
          }
          let imgUploader = [];
          this.imageList.map(v => {
            let formData = new FormData();
            formData.append("file", v.file);
            imgUploader.push(
              mine.upload_image(formData).then(res => {
                if (res.data.code == "0") {
                  v.url = res.data.datas;
                } else {
                  this.$toast(res.data.msg);
                }
              })
            );
          });
          Promise.all(imgUploader).then(() => {

            let that = this,
              data = {
                "headImg": that.imageList[0].url
              };
            mine.user_v1_updateOwn(data).then(res => {
              if (res.code == "0") {
                that.$toast("修改成功");
                this.$router.go(-1);
              } else {
                this.$toast(res.msg);
              }
            });
          });
        }
      },
      expand() {
        this.showActionSheet = true;
      },
    }
  };
</script>
<style lang="scss" scoped>
  @import "../style/index.scss";

  #avatar {
    height: 100%;

    .avatar-img {
      width: 100%;
      height: 100%;

      img {
        width: 90%;
        height: 50%;
        margin: 50px 20px;
      }
    }
  }
</style>